
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="all_liquid_level_chart" style="height:400px;"
	class=" col-sm-12"></div>
<script type="text/javascript">
	// 路径配置
	require.config({
		paths : {
			'echarts' : '/assets/echarts/echarts',
			'echarts/chart/pie' : '/assets/echarts/echarts'
		}
	});

	// 使用
	require(
			[ 'echarts', 'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
			],
			function(ec) {
				// 基于准备好的dom，初始化echarts图表
				var myChart = ec.init(document
						.getElementById('all_liquid_level_chart'));
				option = {
					title : {
						text : '动液面日差图',
						subtext : '来源：动液面在线监测系统'
					},
					tooltip : {
						trigger : 'axis',
						axisPointer : { // 坐标轴指示器，坐标轴触发有效
							type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						},
						formatter : function(params) {
							return params[0].name + '<br/>'
									+ params[0].seriesName + ' : '
									+ params[0].value + '<br/>'
									+ params[1].seriesName + ' : '
									+ params[1].value;
						}
					},
					legend : {
						selectedMode : true,
						data : [ '昨日动液面值', '今日实时增加值' ],
						borderWidth : 1
					},
					toolbox : {
						show : true,
						feature : {
							mark : {
								show : true
							},
							dataZoom : {
								show : true
							},
							restore : {
								show : true
							},
							saveAsImage : {
								show : true
							}
						}
					},
					dataZoom : {
						show : true,
						realtime : true,
						start : 0,
						end : 50
					},
					calculable : true,
					xAxis : [ {
						type : 'category',
						data : [ '井001', '井002', '井003', '井004', '井005',
								'井006', '井007', '井008', '井009', '井010', '井011',
								'井012', '井013', '井014', '井015', '井016', '井017',
								'井018', '井019', '井020', '井021', '井022', '井023',
								'井024', '井025', '井026', '井027', '井028', '井029',
								'井030', '井031', '井032', '井033', '井034', '井035',
								'井036' ]
					} ],
					yAxis : [ {
						type : 'value',
						min : 940,
						axisLabel : {
							formatter : '{value} (m)'
						}
					} ],
					series : [
							{
								name : '昨日动液面值',
								type : 'bar',
								stack : 'sum',
								barCategoryGap : '50%',
								itemStyle : {
									normal : {
										color : 'tomato',
										barBorderColor : 'tomato',
										barBorderWidth : 6,
										barBorderRadius : 0,
										label : {
											show : true,
											position : 'insideTop'
										}
									}
								},
								data : [ 946, 950, 990, 945, 966, 980, 946,
										950, 990, 952, 966, 980, 946, 950, 990,
										1001, 966, 980, 946, 950, 990, 945,
										966, 980, 946, 950, 990, 952, 966, 980,
										946, 950, 990, 1001, 966, 980 ]
							},
							{
								name : '今日实时增加值',
								type : 'bar',
								stack : 'sum',
								itemStyle : {
									normal : {
										color : '#fff',
										barBorderColor : 'tomato',
										barBorderWidth : 2,
										barBorderRadius : 0,
										label : {
											show : true,
											position : 'top',
											formatter : function(params) {
												for ( var i = 0, l = option.xAxis[0].data.length; i < l; i++) {
													if (option.xAxis[0].data[i] == params.name) {
														return option.series[0].data[i]
																+ params.value;
													}
												}
											},
											textStyle : {
												color : 'tomato'
											}
										}
									}
								},
								data : [ 4, 8, 5, 5, 8, 7, 4, 8, 5, 8, 2, 7, 4,
										8, 5, 4, 8, 7, 4, 8, 5, 3, 5, 7, 4, 8,
										5, 2, 8, 7, 4, 3, 5, 8, 8, 7 ]
							} ]
				};

				// 为echarts对象加载数据 
				myChart.setOption(option);
			});
</script>